<template>
  <div class="total">
    <div class="top">
      <div class="goods-information">
        <div class="pic">
          <img src="../../../assets/img/矩形 10.png" alt="">
        </div>
        <h1>半自动洗衣机</h1>
        <p>对水流,水压要求低。 很多没有接入自来水的家庭 是不能够使用全自动洗衣机的, 并不是预算不够 买入全自动洗衣机,</p>
      </div>
      <div class="goods-information">
        <div class="pic">
          <img src="../../../assets/img/矩形 10 拷贝.png" alt="">
        </div>
        <h1>尼康双门冰箱</h1>
        <p>容量大可以很好的对食物进行分区储存, 食物不容易串味,拥有智能化的操控平台, 很多功能都是全自动运行, 采用的是电脑控温, 可以保障冰箱内温度的精准恒久,</p>
      </div>
      <div class="goods-information">
        <div class="pic">
          <img src="../../../assets/img/矩形 10 拷贝 2.png" alt="">
        </div>
        <h1>美的微波炉</h1>
        <p>特性:吸收性,穿透性,反射性。 三大功能:烹调,再热,解冻。 主要特点:高效,节能省电, 加热均匀,保持营养, 安全卫生,消毒杀菌，</p>
      </div>
      <div class="goods-information">
        <div class="pic">
          <img src="../../../assets/img/矩形 10 拷贝 4.png" alt="">
        </div>
        <h1>小米G1扫地机器人</h1>
        <p>机器人清洁吸力能力,小米G1扫拖机器人 采用 4档吸力+3水量设计。 不同档位应对不同需求 ，最高2200pa 的强力档。</p>
      </div>
    </div>
    <div class="bottom">
      <div>
        <img src="../../../assets/img/矩形 12.png" alt="">
      </div>
      <div>
        <img src="../../../assets/img/矩形 12 拷贝.png" alt="">
      </div>
      <div>
        <img src="../../../assets/img/矩形 10 拷贝 3.png" alt="">
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup></script>

<style lang="less" scoped>
.total {
  margin: 10px 10px 0px;
  padding: 0px 0px;
  background-color: #CFE6FF;

  .top {
    display: flex;
    justify-content: space-between;

    .goods-information {
      // flex: 1;
      height: 350px;
      width: 260px;
      // border: 1px solid #333;

      .pic {
        width: 100%;
        height: 210px;

        // border: 1px solid #333;
        // border-radius: 15px;
        img {
          width: 100%;
          height: 100%;
        }
      }

      h1 {
        font-size: 12px;
        font-family: Adobe Heiti Std;
        font-weight: normal;
        color: #030303;
        text-align: center;
        line-height: 35px;
      }

      p {
        height: 70px;
        font-size: 10px;
        font-family: Adobe Heiti Std;
        font-weight: normal;
        color: #000000;
        text-align: center;
        padding: 0px 50px;
        line-height: 17px;
        display: -webkit-box;
        overflow: hidden;
        text-overflow: ellipsis;
        -webkit-line-clamp: 4;
        -webkit-box-orient: vertical;
      }
    }
  }

  .bottom {
    height: 253px;
    display: flex;
    div:nth-child(1) {
      flex: 3;
    }
    div:nth-child(2) {
      flex: 3;
      margin: 0px 10px;
    }
    div:nth-child(3) {
      flex: 2;
    }
    img {
      width: 100%;
      height: 100%;
    }
  }
}
</style>
